{extend name="public/base" /}
{block name="title"}{$article.title} - {$sysInfo.webname}{/block}
{block name="keywords"}{$article.keywords ?: $article.title}{/block}
{block name="description"}{$article.title},{$article.description ?? ''}{/block}
{block name="ogtitle"}<meta property="og:title" content="{$article.title} - {$sysInfo.webname}"/>{/block}
{block name="ogdescription"}<meta property="og:description" content="{$article.title},{$article.description ?? ''}" />{/block}
{block name="meta"}
<meta property="og:type" content="article"/>
<meta property="article:published_time" content="{$article.create_time|date='c'}"/>
<meta property="bytedance:published_time" content="{$article.create_time|date='c'}" />
<meta property="bytedance:lrDate_time" content="{$lrDate_time|date='c'}" />
<meta property="bytedance:updated_time" content="{$article.update_time|date='c'}" />
{/block}
{block name="link"} {/block}
{block name="column"}<div class="layui-hide-xs">{include file="/public/column" /}</div>{/block}

{block name="content"}
<div class="layui-container article-content">
    <div class="layui-row layui-col-space15">
		<div class="layui-col-md8 content detail">
			<section class="fly-panel detail-box">
				{//标题}
				<h1>{article:title /}</h1>

				{//图标}
				<div class="user-questions">
					<a class="user-avatar" href="{article:user name='link' /}">
						<img src="{article:author_avatar' /}" alt="{article:user name='name' /}" />
						<cite>{article:author /} </cite>
					</a>
					<span class="user-post-time" data="{$article.create_time}" style="padding-top: 5px">{$article.update_time|date="Y-h-d H:i"}</span>
					<i class="iconfont" title="{:lang('reply')}">&#xe60c;</i>
					{article:comments_num /}
					<i class="iconfont" title="浏览">&#xe60b;</i>
					{$pv}
					{if ($article.flags.is_wait == 0) }
					<span class="layui-btn layui-btn-xs" style="background-color: #ff5722">{:lang('no finished')}</span>
					{else /}
					<span class="layui-btn layui-btn-xs" style="background-color: #009688">{:lang('finished')}</span>
					{/if}
					<span id="LAY_jieAdmin" data-id="{$article['id']}"></span>
				</div>

				<hr class="layui-border-green" />

				{//问题内容}
				<div style="margin: 10px 0; font-size: 16px; font-weight: bold; color: rgb(161, 155, 155)">问题描述：</div>

				<article class="detail-body photos" id="content">{article:content /}</article>

				<div style="margin-top: 15px">标签
				{article:tag}
				<a href="{$tag.url}"><span class="layui-btn layui-btn-xs layui-btn-normal  layui-btn-radius">{$tag.name}</span></a>
				{/article:tag}
				</div>


				<div style="margin: 20px 0px 15px 0px; color: rgb(130, 125, 125)">
					<p style="line-height:200%;">{$sysInfo.state|raw}</p>
				</div>
				<div style="margin-top: 20px">本文链接：
					<a href="{article:url /}">{article:url /}</a>
				</div>
			</section>

			{//评论内容}
			<section class="fly-panel detail-box" id="flyReply">
				<span style="font-size:18px;">评论 {article:comments_num /}</span>

				<ul class="jieda" id="jieda">
					{comment:list}
					<li data-id="{$comment.id}" class="jieda-daan">
						<div class="detail-about detail-about-reply">
							<a class="fly-avatar" href="{comment:ulink /}">
								<img src="{comment:uimg /}" alt="{comment:uname}">
							</a>
							<div class="fly-detail-user">
								<a href="{comment:ulink /}" class="fly-link">
								<cite>{comment:uname /}</cite>
								</a>
								{if condition="$article.user_id eq $comment.user_id"}<span>({:lang('poster')})</span>{/if}
								<span>{comment:usign /}</span>
							</div>
							<div class="detail-hits">
								<span class="post-time" data="{comment:time}"></span>{:hook('ipShow',$comment.user.city)}</span>
								{if $comment.cai == 1}<i class="iconfont icon-caina" title="最佳答案"></i>{/if}
							</div>

							

							<div class="detail-body jieda-body photos">{comment:content /}</div>
							<div class="jieda-reply">
								{eq name="comment.delete_time" value="0"}
								<span class="jieda-zan {if($comment.zan != 0)}zanok{/if}" type="zan">
										<i class="iconfont icon-zan"></i><em>{comment:zan /}</em>
									</span>
								<span type="reply" data-pid="{comment:id /}" data-tid="{comment:uid /}"><i class="iconfont icon-svgmoban53"></i>{:lang('reply')}</span>
								{//评论编辑删除采纳权限}
								<div class="jieda-admin">
								{if ((session('user_id') == $comment.user_id) && (getLimtTime($comment.create_time) < 2)) OR ($user.auth  ?? '')}
								<span type="edit" class="comment-edit" data-id="{comment:id /}">{:lang('edit')}</span>
								<span type="del" class="comment-del" data-id="{comment:id /}">{:lang('delete')}</span>
								{/if}
								{if ($comment.cai == 0) && ((session('user_id') == $article.user_id) OR ($user.auth ?? ''))/}
									<span class="jieda-accept" type="accept">{:lang('accept')}</span>
								{/if}
								</div>
								{/eq}

								{// 第二层回复}
								{notempty name="$comment.children"}
								{volist name="$comment.children" id="vo"}

									<div class="layui-clear" style="margin:10px 0; padding: 10px; border: 1px solid #f0f0f0; background: #f6f6f6">
										
										<div style="float: left;width: calc(100% - 50px);">
											<div>
												<img src="{$vo.user.user_img}" style="width: 30px; height: 30px; border-radius: 15px; object-fit: cover">
												- {$vo.user.name} - {$vo.create_time|date='Y-m-d H:i'}
											</div>
											<div class="detail-body jieda-body photos">{$vo.content|raw}</div>
											<div class="jieda-reply">
												{eq name="vo.delete_time" value="0"}
												<span class="jieda-zan {if($vo.zan != 0)}zanok{/if}" type="zan">
															<i class="iconfont icon-zan"></i><em>{$vo.zan}</em>
															</span>
												<span type="reply" data-pid="{$vo.id}" data-tid="{$vo.user.id}"><i class="iconfont icon-svgmoban53"></i>{:lang('reply')}</span>
												{//评论编辑删除采纳权限}
												<div class="jieda-admin">
													{if ((session('user_id') == $vo.user.id) && (getLimtTime($vo.create_time) < 2)) OR ($user.auth  ?? '')}
													<span type="edit" class="comment-edit" data-id="{$vo.id}">{:lang('edit')}</span>
													<span type="del" class="comment-del" data-id="{$vo.id}" >{:lang('delete')}</span>
													{/if}
												</div>
												{/eq}

											</div>
										</div>
									</div>

									{// 第三层回复}
									{notempty name="$vo.children"}
									{volist name="$vo.children" id="voo"}
									<div class="layui-clear" style="margin:10px 0; padding: 10px; border: 1px solid #f0f0f0;">
										<div style="float: left;width: calc(100% - 50px);">
											<div>
												<img src="{$voo.user.user_img}" style="width: 30px; height: 30px; object-fit: cover; border-radius: 15px;">
												{$voo.user.name} @ {$voo.touser} {$voo.create_time|date='Y-m-d H:i'}
											</div>
											<div class="detail-body jieda-body photos">{$voo.content|raw}</div>
											<div class="jieda-reply">
											{eq name="voo.delete_time" value="0"}
											<span class="jieda-zan {if($voo.zan != 0)}zanok{/if}" type="zan">
												<i class="iconfont icon-zan"></i><em>{$voo.zan}</em>
											</span>
											<span type="reply" data-pid="{$vo.id}" data-tid="{$voo.user.id}"><i class="iconfont icon-svgmoban53"></i>{:lang('reply')}</span>
											{//评论编辑删除采纳权限}
											<div class="jieda-admin">
												{if ((session('user_id') == $voo.user.id) && (getLimtTime($voo.create_time) < 2)) OR ($user.auth  ?? '')}
												<span type="edit" class="comment-edit" data-id="{$voo.id}">{:lang('edit')}</span>
												<span type="del" class="comment-del" data-id="{$voo.id}">{:lang('delete')}</span>
												{/if}
											</div>
											{/eq}
											</div>
										</div>
									</div>
									{/volist}
									{/notempty}

								{/volist}
								{/notempty}
							</div>

						</div>
					</li>
					{/comment:list}
				</ul>
				<div style="text-align: center" id="pages"></div>
			</section>

			{//评论区}
			{if session('?user_id') AND ( config('taoler.config.is_reply') == 1 ) AND ( $article.is_reply == 1 )}
			<div class="layui-form layui-form-pane">
				<div class="layui-form-item layui-form-text">
				<a name="comment"></a>
				<div class="layui-input-block">
					<textarea id="L_content"  name="content" required lay-verify="required" placeholder="{:lang('please input the content')}" class="layui-textarea taonyeditor" style="height: 150px"></textarea>
				</div>
				</div>
				<div class="layui-form-item que-comments">
				<input type="hidden" name="article_id" value="{$article.id}" />
				<button class="layui-btn layui-btn-danger" lay-filter="user-comment" lay-submit>{:lang('submit comments')}</button>
				</div>
			</div>
			{/if}
		</div>

		{// 右栏}
		<div class="layui-col-md4">
			<div class="fly-panel">
				<div class="fly-panel-main wenda-user">
				<div class="user-img">
					<a href="{$Request.domain}{:url('user/home',['id'=>$article.user.id])}">
					<img class="" src="{$Request.domain}{$article.user.user_img}" alt="{$article.user.name}" />
					</a>
				</div>
				<div class="questions">
					<span class="layui-badge layui-bg-green">+ 关注</span>
				</div>
				</div>
			</div>
		</div>

		{//crud管理模块}
		
    </div>
  <!--底部栏-->
</div>
{include file="public/menu" /}

{/block}

{block name="script"}

<script>

  var collectionFind = "{:url('Collection/find')}",
      collection = "{:url('collection/')}",
      articleJieset = "{:url('Article/jieset')}",
      articleDelete = "{:url('Article/delete')}",
      commentJiedaZan = "{:url('Comment/jiedaZan')}",
      commentJiedaCai = "{:url('Comment/jiedaCai')}",
      commentGetDa = "{:url('Comment/getDa')}",
      commentUpdateDa = "{:url('Comment/updateDa')}",
      commentJiedaDelete = "{:url('Comment/jiedaDelete')}",
      langCollection = "{:lang('collection')}",
      langCancelCollection = "{:lang('cancel collection')}";

	layui.use(["laypage"], function () {
		var $ = layui.jquery,
			form = layui.form,
			uid = layui.cache.user.uid,
			laypage = layui.laypage;

		let AID = "{$article.id}";
		let LOGIN_URL = "{:url('login/index')}";

		// 评论接口
		function comment(data){
			if (uid == -1) {
				layer.msg('请先登陆',{icon:5,time:2000},function(){location.href = LOGIN_URL});
				return false;
			}
			var index = layer.load(1);
			$.ajax({
				type: "post",
				url: "{:url('comment/add')}",
				data: data,
				dataType: "json",
				success:function (res) {
					layer.close(index);
					if (res.code === 0) {
						layer.msg(res.msg,{icon:6,time:2000},function () {location.reload(true)});
					}else {
						layer.open({title:'评论失败',content:res.msg,icon:5,anim:6});
					}
				}
			});
		}

		// 回复用户
		$("span[type='reply']").on('click',function (){
			var pid = $(this).attr('data-pid');
			var tid = $(this).data('tid');
			var html =
					'<form class="layui-form user-comment" style="margin-left:50px;">' +
					'<div>' +
					'<input type="hidden" name="article_id" value="{$article.id}">' +
					'<input name="pid" value="'+ pid +'" class="layui-hide">' +
					'<input name="to_user_id" value="'+ tid +'" class="layui-hide">' +
					'<textarea name="content" required lay-verify="required"  class="layui-textarea " style="height: 100px; right: 5px; margin: 10px 5px;"></textarea>' +
					'<button  type="submit" class="layui-btn" lay-submit lay-filter="submit-user-comment">提交</button>' +
					'</div>' +
					'</form>';
			var forms = $(this).nextAll('form');
			if(forms.length == 0) {
			// 移除其它评论块
			$('.user-comment').remove();
			//动态添加评论块
			$(this).next().after(html);
			}
		})

		//评论需要登陆
		form.on("submit(user-comment)", function (data) {
			comment(data.field);
		});
		//提交回复
		form.on('submit(submit-user-comment)', function(data){
			comment(data.field);
			return false;
		})

		// 编辑评论
		$(".comment-edit").on('click', function () {
			var id = $(this).data('id');
			layer.open({
				type: 2,
				title: '修改',
				shade: 0.1,
				area: ['600px', '500px'],
				content: "{:url('comment/edit')}" + '?id=' + id
			});
		});

      // 删除评论
      $(".comment-del").on('click', function () {
        var id = $(this).data('id');
        layer.confirm('需要删除吗？', {icon: 3}, function (){
			$.post("{:url('comment/jiedaDelete')}", {id: id}, function (res) {
				if (res.status === 0) {
					toast.success({title: "成功消息", message: res.msg});
					location.reload(true);
				} else {
					toast.error({title: "失败消息", message: res.msg});
				}
			})
        })
      });

    // 评论分页
    laypage.render({
		elem: "pages", //注意，这里的 test1 是 ID，不用加 # 号
		count: "{article:comments_num /}", //数据总数，从服务端得到
		limit: 10,
		curr: "{$page}",
		//获取起始页
		jump: function (obj, first) {
		var page = obj.curr;
		var limit = obj.limit;
		var  url = "{:url('article_detail',['id' => $article.id ,'ename' =>$article['cate']['ename']])}";
		//首次不执行
		if (!first) {
			$.post("{:url('article/detail')}", { id: AID, page: page }, function () {
				location.href = url + '?page=' + page + '#flyReply';
			});
		}
		},
    });

    $("#jiemi").click(function (){
		//判断登陆
		if(uid == -1){
			layer.msg('请先登录再查看', {icon: 6}, function(){location.href = LOGIN_URL})
			return false;
		}
		layer.prompt(function(value, index, elem){
			$.post("{:url('article/jiemi')}",{id: AID, art_pass:value},function (res){
				layer.close(index);
				if(res.code === 0){
					layer.msg(res.msg,{icon:6,time:2000},function () {
						parent.location.reload(); //刷新父页面，注意一定要在关闭当前iframe层之前执行刷新
					});
				} else {
					layer.msg(res.msg,{icon:5,adim:6});
				}
			});
		
		});
    });

  });
</script>

{/block}

